<template>
    <div class="view">
        <nav-bar title="情绪测试" backgroundColor="#7bbcff" color="#fff" :fixed="false" :shadow="true">
            <div class="back" slot="left" @click="back">
                <i class="iconfont icon-fanhui"></i>
            </div>
        </nav-bar>
        <div class="test-intro">
            <div class="explain">情绪稳定一般被看做是一个人心理成熟的重要标志，如果现在你已经能够积极地调节和控制自己的情绪，那么将有助于你以平稳的心态从容面对人生的挑战。</div>
            <div class="question">你的情绪是稳定的吗？</div>
            <div class="question">如果你希望知道结果，不妨完成下面的题目。</div>
        </div>
        <div class="test-nav">
            <div class="test-item">
                <img src="@/assets/image/emotion-questionnaire.png"/>
            </div>
            <div class="test-item">
                <img src="@/assets/image/method-questionnaire.png"/>
            </div>
            <div class="test-item">
                <img src="@/assets/image/examination-questionnaire.png"/>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";

    import NavBar from "@/components/aui/NavBar.vue";

    @Component({
        components: {
            NavBar
        }
    })
    export default class EmotionTest extends Scene {

        private back() {
            this.navigateBack();
        }
    }
</script>

<style scoped lang="stylus">
    .test-intro
        font-size 15px;
        line-height 1.5;
        letter-spacing .5px;
        margin-bottom: 50px;

        .explain
            padding 25px 10px 15px 10px;
            text-indent 2em;

        .question
            color $theme-advancing-color
            text-indent 2em;
            padding 5px 10px;

    .test-nav
        display flex;
        justify-content space-between

        .test-item
            flex 1;
            padding 10px 10px;
            box-sizing border-box;
            border-radius 9px;
            color #fff;
            position relative;

            img
                width 100%;

</style>
